<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>拍照上传</title>
    <style>
        .upload-container {
            text-align: center;
            padding: 20px;
        }

        #capture-btn {
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            width: 500px;
            height: 500px;
            margin-top:500px;
            background-image: url("./pz.jpg");
            background-size:450px;
            background-repeat: no-repeat; /* 不重复 */
            background-position: center; /* 水平垂直居中 */
            background-color: #fff;
            border: 3px dashed #ccc ;
        }

        #upload {
            display: none; /* 确保文件输入元素不可见 */
        }
    </style>
</head>
<body>

<div class="upload-container">
    <button id="capture-btn">拍照</button>
    <input id="upload" type="file" accept="image/*" class="abc" multiple style="display:none;" name="file">
</div>
<script type="text/javascript">
    document.getElementById('capture-btn').addEventListener('click', function() {
        // 触发文件输入元素，打开文件选择对话框
        document.getElementById('upload').click();
    });
    document.getElementById('upload').addEventListener('change', function(event) {
        // 获取选中的文件列表
        var files = event.target.files;
        if (files.length > 0) {
            var file = files[0]; // 获取第一个文件

            // 创建一个URL对象，用于预览图片
            var imageUrl = URL.createObjectURL(file);

            // 在这里，你可以使用imageUrl来显示图片预览，或者执行其他操作
            console.log(imageUrl);
            const url = new URL(window.location.href);
            const id = url.searchParams.get('userId');
            // 如果需要上传文件，可以创建一个FormData对象
            var formData = new FormData();
            formData.append('file', file);
            // 创建FormData对象
            formData.append('userId', id); // 添加userId

            // 发送POST请求到服务器上传文件
            // 这里需要根据你的服务器端接口来设置
            fetch('/api/student/upload/test', {
              method: 'POST',
              body: formData
            }).then(response => {
                    if(response.ok) { // 如果服务器响应状态码为2xx，则认为是成功的
                        return response.json();
                    } else {
                        throw new Error('上传失败，服务器响应异常');
                    }
                })
                .then(data => {
                    console.log(data);
                    // 如果上传成功，重定向到成功页面
                    window.location.href = 'success.html';
                })
                .catch(error => {
                    console.error('Error:', error);
                    // 处理错误，例如显示错误消息
                    window.location.href = 'error.html'
                });
        }
    });
</script>
</body>
</html>

